import React, { useEffect } from 'react';

import echarts from "echarts";

import china from '../mapJson/china.json';


import anhui from '../mapJson/province/anhui.json';
import aomen from '../mapJson/province/aomen.json';
import beijing from '../mapJson/province/beijing.json';
import chongqing from '../mapJson/province/chongqing.json';
import fujian from '../mapJson/province/fujian.json';
import gansu from '../mapJson/province/gansu.json';
import guangdong from '../mapJson/province/guangdong.json';
import guangxi from '../mapJson/province/guangxi.json';
import guizhou from '../mapJson/province/guizhou.json';
import hainan from '../mapJson/province/hainan.json';
import hebei from '../mapJson/province/hebei.json';
import heilongjiang from '../mapJson/province/heilongjiang.json';
import henan from '../mapJson/province/henan.json';
import hubei from '../mapJson/province/hubei.json';
import hunan from '../mapJson/province/hunan.json';
import jiangsu from '../mapJson/province/jiangsu.json';
import jiangxi from '../mapJson/province/jiangxi.json';
import jilin from '../mapJson/province/jilin.json';
import liaoning from '../mapJson/province/liaoning.json';
import neimenggu from '../mapJson/province/neimenggu.json';
import ningxia from '../mapJson/province/ningxia.json';
import qinghai from '../mapJson/province/qinghai.json';
import shaanxi from '../mapJson/province/shaanxi.json';
import shandong from '../mapJson/province/shandong.json';
import shanghai from '../mapJson/province/shanghai.json';
import shanxi from '../mapJson/province/shanxi.json';
import sichuan from '../mapJson/province/sichuan.json';
import taiwan from '../mapJson/province/taiwan.json';
import tianjin from '../mapJson/province/tianjin.json';
import xianggang from '../mapJson/province/xianggang.json';
import xinjiang from '../mapJson/province/xinjiang.json';
import xizang from '../mapJson/province/xizang.json';
import yunnan from '../mapJson/province/yunnan.json';
import zhejiang from '../mapJson/province/zhejiang.json';

const province = new Map();
province.set("台湾", taiwan);
province.set("河北", hebei);
province.set("山西", shanxi);
province.set("内蒙古", neimenggu);
province.set("辽宁", liaoning);
province.set("吉林", jilin);
province.set("黑龙江", heilongjiang);
province.set("江苏", jiangsu);
province.set("浙江", zhejiang);
province.set("安徽", anhui);
province.set("福建", fujian);
province.set("江西", jiangxi);
province.set("山东", shandong);
province.set("河南", henan);
province.set("湖北", hubei);
province.set("湖南", hunan);
province.set("广东", guangdong);
province.set("广西", guangxi);
province.set("海南", hainan);
province.set("四川", sichuan);
province.set("贵州", guizhou);
province.set("云南", yunnan);
province.set("西藏", xizang);
province.set("陕西", shaanxi);
province.set("甘肃", gansu);
province.set("青海", qinghai);
province.set("宁夏", ningxia);
province.set("新疆", xinjiang);
province.set("北京", beijing);
province.set("天津", tianjin);
province.set("上海", shanghai);
province.set("重庆", chongqing);
province.set("香港", xianggang);
province.set("澳门", aomen);

export type MapProps = {
	style?: React.CSSProperties
};

const ChinaMap: React.FC<MapProps> = (props) => {

	const { style } = props

	const initProvince = (mName:string, mData: any) => {

		let option = {
			backgroundColor: 'transparent',
			geo: {
				map: mName,
				zoom: 1, // 当前视角的缩放比例（地图的放大比例）
				label: {
					normal: {
						show: true, //显示省份标签
						textStyle: { color: '#fff' }, //省份标签字体颜色
					},
					emphasis: {
						show: true,
						textStyle: { color: '#eee' },
					},
				},
				itemStyle: {
					normal: {
						areaColor: '#3e67db', //区域颜色
						borderColor: '#eee',
					},
					emphasis: {
						borderColor: '#eee',
						areaColor: '#4a7cff',
					},
				},
			},
			series: [
				{
					type: 'map',
					geoIndex: 0,
					label: {
						show: true
					},
				}
			],
		};

		echarts.registerMap(mName, mData);

		const myChart = echarts.init(document.getElementById('map'));

		myChart.setOption(option);

		if(myChart._$handlers.click){
			myChart._$handlers.click.length = 0;
		}

		myChart.on('click', (data: any) => {
			const pData = province.get(data.name);
			if (pData) {
				initProvince("map", pData);
			}else{
				initProvince("china", china);
			}
			console.log('click', data);
		});

		window.addEventListener('resize', function () {
			myChart.resize();
		});
	};


	useEffect(() => {

		initProvince("china", china);

	}, []);

	return (
		<div id='map' style={style}></div>
	);
};

export default ChinaMap;
